import React, { FC, useState } from 'react'
import { Form, Input, Button, Row, Col, DatePicker } from 'antd'
import commonStyle from '../../publicStyle'
import { searchFormType, CreativityTable } from '../index.d'
import { getActivityList } from '@/services'
import { Moment } from 'moment'

const RangePicker: any = DatePicker.RangePicker
interface IProps {
  setTableData: (value: any) => void
  searchForm: searchFormType
  setSearchForm: (params: any) => void
  setTotal: (number: number) => void
}
function SearchForm(props: IProps) {
  const { setTableData, setTotal, searchForm, setSearchForm } = props
  const [form] = Form.useForm()
  const { mt20, mr20 } = commonStyle

  const createTimeChange = (date: Moment, dateString: string) => {
    setSearchForm({
      ...searchForm,
      queryStartDate: dateString[0],
      queryEndDate: dateString[1],
    })
  }
  const searchFrom = (searchType: searchFormType) => {
    setSearchForm(searchType)
    getActivityList(searchType).then((res: CreativityTable) => {
      if (res.code === 200) {
        setTableData(res.data.row)
        setTotal(res.data.total)
      }
    })
  }
  const onReset = () => {
    setSearchForm({
      ...searchForm,
      activityName: '',
      queryStartDate: '',
      queryEndDate: '',
    })
    form.resetFields()
  }
  return (
    <Form form={form} name="control-hooks" style={mt20}>
      <Row>
        <Col style={mr20}>
          <Form.Item name="activityName" label="活动名称">
            <Input
              placeholder="请输入活动名称"
              onChange={val => {
                setSearchForm({
                  ...searchForm,
                  activityName: val.target.value,
                })
              }}
            />
          </Form.Item>
        </Col>
        <Col>
          <Form.Item name="createTime" label="创建时间">
            <RangePicker onChange={createTimeChange} />
          </Form.Item>
        </Col>
        <Col span={3}></Col>
        <Col>
          <Form.Item>
            <Button
              type="primary"
              onClick={() => {
                searchFrom({ ...searchForm, page: 1, pageSize: 10 })
              }}
              style={{
                marginRight: '10px',
              }}
            >
              搜索
            </Button>
            <Button htmlType="button" onClick={onReset}>
              重置
            </Button>
          </Form.Item>
        </Col>
      </Row>
    </Form>
  )
}
export default SearchForm
